<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box-hd">
      <h2 class="title-div">账户流水</h2>
    </div>
    <!-- 内容区 -->
    <div class="box-bd p30">
      <!-- 筛选条件 -->
      <div class="search-box">
        <el-button icon="el-icon-search" size="small">筛选</el-button>
      </div>
      <!-- 列表数据 -->
      <div class="list-box">
        <el-table :data="tableData" max-height="500px" show-summary stripe class="table-list" v-loading="loading">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="流水类型">
            <template slot-scope="scope">
              {{ typeOptions[scope.row.billType].label }}
            </template>
          </el-table-column>
          <el-table-column prop="billMoney" label="流水金额">
            <template slot-scope="scope">
              {{ Math.abs(scope.row.billMoney) }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="createDate" label="日期" width="180" :formatter="dateFormat"></el-table-column>
        </el-table>
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchData.currentPage"
          :page-sizes="[15, 25, 30, 50]"
          :page-size="searchData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.size">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { findByAccount } from '@/api/bill'
import { dateFormat } from '@/utils/index'
export default {
  data() {
    return {
      id: '--',
      tableData: [],
      loading: false,
      typeOptions: [
        {
          val: 0,
          label: '支出'
        },
        {
          val: 1,
          label: '收入'
        }
      ],
      searchData: {
        currentPage: 1,
        pageSize: 15
      }
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.initTableData()
  },
  methods: {
    dateFormat(obj) {
      return dateFormat(obj.createDate, 'YYYY-MM-DD HH:mm:ss')
    },
    initTableData() {
      this.loading = true
      findByAccount(this.id).then(res => {
        this.tableData = res.data
        this.tableData.map(res => {
          res.billMoney = res.billType === 1 ? res.billMoney : -res.billMoney
          return res
        })
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.searchData.currentPage = 1
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.table-list{
  margin-bottom: 15px;
}
</style>
